<template>
  <div class="mine-wrapper">
    mine-wrapper
    <p v-highlight="'yellow'">高亮显示此文本亮黄色</p>
    <van-button @click="submit">按钮</van-button>
    <div>
      <template v-for="item in state.healthJson" :key="item.title">
        <ul>
          <h1 style="font-size: 25px">{{ item.cName }}</h1>
          <template v-for="v in item.children" :key="v">
            <li
              class="item-box"
              :class="item.activeArr.indexOf(v) !== -1 ? 'active' : ''"
              @click="handleActive(item, v)"
            >
              {{ v }}
            </li>
          </template>
        </ul>
      </template>
    </div>
  </div>
</template>
<script>
import healthJson from './health.json'
import { defineComponent, reactive, toRefs } from 'vue'
import { axios } from '@/utils/request'
export default defineComponent({
  setup(props, context) {
    const state = reactive({
      healthJson
    })

    const handleActive = (item, v) => {
      if (item.isSingle) {
        item.activeArr = []
        item.activeArr.push(v)
      } else {
        if (item.activeArr.indexOf(v) === -1) {
          item.activeArr.push(v)
        } else {
          item.activeArr.splice(item.activeArr.indexOf(v), 1)
        }
      }
      console.log(item)
    }

    const submit = () => {
      console.log('state:', state.healthJson)
      let obj = {}
      state.healthJson.forEach((item) => {
        obj[item.title] = item.activeArr
      })
      console.log('opbk:', obj.civil[0], obj['personalHabit'][0])
      axios.post('/api/test', obj).then((res) => {
        console.log('res:', res)
      })
    }

    return {
      state,
      handleActive,
      submit
    }
  }
})
</script>
<style scoped lang="scss">
.item-box {
  display: inline-block;
  padding: 8px 8px;
  margin: 5px;
  line-height: 30px;
  background: #eee;
  border-radius: 4px;
}
.active {
  color: rgb(72, 243, 72);
  background: #ab9e9e;
}
</style>
